/**
* 视频课程
*/
<template>
  <div v-cloak>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item>视频课程</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 数据 -->
    <div class="user-search">
      <el-row :gutter="20">
        <el-col :span="4" v-for="item in courseList" :key="item.courseId">
          <div style="cursor: pointer;"  class="grid-content bg-purple" @click="goProject(item.courseId)">
            <el-image class="grid-content-img" :src="item.coverPlan">
              <div slot="placeholder" class="image-slot">
                加载中<span class="dot">...</span>
              </div>
            </el-image>
            <div class="grid-content-title">
              <div style=" height: 30px;">{{ item.name }}</div>
              <div>
                {{ item.lessonNum ? item.lessonNum : 0 }}个视频课程
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
    <div style="width: 100%; text-algin:left;margin-top:15px;">
      <Paging
        :pageNum="this.pageForm.page"
        :total="count"
        :pageSize="this.pageForm.pageSize"
        :small="true"
        @sizeChange="sizeChange"
        @currentChange="currentChange"
      ></Paging>
    </div>
  </div>
</template>

<script>
import Paging from "@/components/Paging";
export default {
    // 注册组件
  components: {
    Paging
  },
  data() {
    return {
      courseList: [],
      count: 0,
       pageForm: {
        page: 1,
        pageSize: 12,
      },
    };
  },

  /**
   * 数据发生改变
   */

  /**
   * 创建完毕
   */
  created() {
    this.getalloptin();
  },

  /**
   * 里面的方法只有被调用才会执行
   */
  methods: {
    // 去项目视频列表
    goProject(courseId){
      sessionStorage.setItem('courseId',JSON.stringify(courseId));
      this.$router.push({  
            path: 'videoList',   
            name: 'videoList',
            params: {   
                courseId:courseId,   
            }  
        })
    },
    // 查询列表
    getalloptin() {
      var tData = {
        action: "app/course/page",
        headers: this.abdpConfig.getApiJson(),
        data: {
          page: this.pageForm.page,
          pageSize: this.pageForm.pageSize,
        },
      };
      this.abdpAjax.http(tData).then((rsp) => {
        if (rsp.data.code == 200) {
          //数据
          this.courseList = rsp.data.data.records;
          this.count = rsp.data.data.total;
        } else {
          this.$message.error(rsp.data.message);
        }
      });
    },
    //上一页下一页按钮
    currentChange(val) {
     this.pageForm.pageSize = val;
      this.getalloptin();
    },
    //每页显示几条数据按钮
    sizeChange(val) {
      this.pageForm.pageSize = val;
      this.getalloptin();
    },
    // 关闭
    closeDialog() {
      this.editFormVisible = false;
    },
  },
};
</script>

<style scoped>
.user-search {
  margin-top: 20px;
}

.el-row {
  margin-bottom: 20px;
}
.el-col {
  border-radius: 4px;
}
.grid-content {
  border-radius: 4px;
  padding: 0 20px;
  text-align: center;
}

.grid-content img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}
.grid-content-title {
  text-align: left;
  font-size: 15px;
}
.grid-content-title div {
  margin-top: 10px;
}
.row-bg {
  padding: 10px 0;
}
</style>
